<form class="form-horizontal" id="form1" action="/user/add" method="post" enctype="multipart/form-data">
	<div class="form-group">
		<div class="col-xs-2"><label>Nick Name</label></div>
		<div class="col-xs-10"><input type="text" class="form-control" placeholder="Nick Name" name="nickname"></div>
	</div>
	<div class="form-group">
		<div class="col-xs-2"><label>User Name</label></div>
		<div class="col-xs-10"><input type="text" class="form-control" placeholder="User Name" name="username"></div>
	</div>
	<div class="form-group">
		<div class="col-xs-2"><label>Password</label></div>
		<div class="col-xs-10"><input type="text" class="form-control" placeholder="Password" name="password"></div>
	</div>
	<div class="form-group">
		<div class="col-xs-2"><label>Email</label></div>
		<div class="col-xs-10"><input type="text" class="form-control" placeholder="Email" name="email"></div>
	</div>
	<div class="form-group">
		<div class="col-xs-2"><label>File input</label></div>
		<div class="col-xs-10">
			<input type="file" name="photo" accept="image/png,image/jpg,image/gif,image/jpeg">
			<p class="help-block">Upload your photo.</p>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
	$("#form1").validate({
		rules: {
			nickname: {
				required: true,
				maxlength: 10
			},
			username: {
				required: true
			},
			password: {
				required: true,
				minlength: 6
			},
			email: {
				required: true,
				email: true
			},
			photo: {
				required: true
			}
		}
	});
</script>